<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <style>
        #main{
            margin: auto;
            border-radius: 5px;
        }
        #main2{
            border-radius: 5px;
            margin: auto;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        #main3{
            border-radius: 5px;
        }
    </style>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/js/echarts.js}"></script>
    <script th:src="@{/js/Chart.js}"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 900px;height:420px;"></div>
<div id="main2" style="width: 900px;height:420px;"></div>
<div id="main3" style="width: 900px;height:420px; margin: auto"></div>
</body>
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'));
    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: '新增用户注册数',
            left: 'center'
        },
        backgroundColor: '#fefefe',
        legend: {
            show: true,
            data: ['新增用户注册数'],
            bottom: 'top'
        },
        xAxis: {
            type: 'category',
            data: ['5-01', '5-02', '5-03', '5-04', '5-05', '5-06', '5-07', '5-08', '5-09', '5-10', '5-11', '5-12', '5-13']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line'
        }]

    };
    $(function () {
        $.ajax({
            "url": "/jh/qryAll",
            "type": "get",
            "data": {},
            "datetype": "JSON",
            "success": function (data) {
                var simpleObj = {data: [], type: 'line'};
                simpleObj.data = data;
                option1.series = [simpleObj];
                myChart1.setOption(option1);
                console.log(option1.series)
            }
        })
    });
    //绑卡与实名用户数》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》


    var colors1 = ['#5793f3', '#d14a61', '#675bba'];
    option2 = {
        title: {
            text: '绑卡与实名用户数',
            left: 'center'
        },
        color: colors1,
        backgroundColor: '#fefefe',
        tooltip: {
            trigger: 'none',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            bottom: 'top',
            textFont: 'bold 20px verdana',
            data: ['实名认证用户数', '绑卡用户数']
        },
        grid: {
            top: 70,
            bottom: 50
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: colors1[1]
                    }
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '实名认证用户数 ' + params.value
                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: ['5-01', '5-02', '5-03', '5-04', '5-05', '5-06', '5-07', '5-08', '5-09', '5-10', '5-11', '5-12', '5-13']
            },
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: colors1[0]
                    }
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '绑卡用户数' + params.value
                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: []
    };
    $(function () {
        $.ajax({
            "url": "/jh/qryAllTwo",
            "type": "get",
            "data": {},
            "datetype": "JSON",
            "success": function (data) {
                option2.series = [data.serieA, data.serieB];
                myChart2.setOption(option2);
                console.log(option2.series)
            }
        })
    });


    var colors = ['#5793f3', '#d14a61', '#675bba'];
    option3 = {
        title:{
            text: '新增借款用户数',
            left:'center'
        },
        color: colors,
        backgroundColor: '#fefefe',
        tooltip: {
            trigger: 'none',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            bottom: 'top',
            data: ['借款成功触发用户数']
        },
        grid: {
            top: 70,
            bottom: 50
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: colors[1]
                    }
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '借款成功触发用户数  ' + params.value
                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: ['5-01', '5-02', '5-03', '5-04', '5-05', '5-06', '5-07', '5-08', '5-09', '5-10', '5-11', '5-12', '5-13']
            },
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: colors[0]
                    }
                },
                data: ['5-01', '5-02', '5-03', '5-04', '5-05', '5-06', '5-07', '5-08', '5-09', '5-10', '5-11', '5-12', '5-13']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                type:'line',
                data: []
            }
        ]
    };
    $(function () {
        $.ajax({
            "url": "/jh/qryAllthree",
            "type": "get",
            "data": {},
            "datetype": "JSON",
            "success": function (data) {
                var simpleObj = {data: [], type: 'line'};
                simpleObj.data = data;
                option3.series = [simpleObj];
                myChart3.setOption(option3);
                console.log(option3.series)
            }
        })
    });
</script>
</html>